<!-- 
 * 需求管理
 * @author: 冯宇
 * @since: 2022-05-16
 * index.vue
-->
  <template>
    <div class="sensitive-container h100">
        <router-view v-show="routerCutLevel === 3" class="detailsPage"></router-view>
        <div v-show="routerCutLevel === 2" class="listPage">

            <Filters :formModel="data.formModel" :formLabel="data.formLabel" @reset="resizeForm"
                @filter="getSensitiveWordList">
            </Filters>

            <TableCom :tableHeader="data.tableHeader" :tableData="data.tableData" :btnData="data.btnData"
                @getCurrentChange="getCurrentChange" @getSizeChange="getSizeChange" @comEvent="comEvent"
                @getSelectChange="getSelectChange" :isShowCheckbox="true" @colSelect="colSelect" @refresh="refreshTable"
                :pagination="data.pagination" :loading="data.loading" handleWidth="84">
                <el-button v-for="(item, index) in data.btnList" :key="index" class="tableBtnCss"
                    :style="{ backgroundColor: item.bgColor }" @click="userManageBtnList(index)">
                    <svg-icon :name="item.icon" v-if="item.icon"></svg-icon>
                    {{ item.name }}
                </el-button>
            </TableCom>

            <el-dialog v-model="data.dialog.show" :title="data.dialog.type+'敏感词'" width="30%">
                <el-form :data="data.dialog">
                    <el-form-item>
                        <el-input v-model="data.dialog.addValue" placeholder="请输入敏感词" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary" @click="addSensitiveWord">提交</el-button>
                        <el-button @click="data.dialog.show = false">取消</el-button>
                    </span>
                </template>
            </el-dialog>

            <!-- 上传文件 -->
            <el-dialog v-model="isShowLead" title="敏感词导入" width="30%" :before-close="() => (isShowLead = false)">
                <uploadDownload @upload="uploadFile"></uploadDownload>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { reactive, computed, ref } from 'vue'
import { getSensitiveWordListApi, sensitiveWordBatchApi, addSensitiveWordApi , editSensitiveWordApi } from '@/api/interface/sensitiveWord.js'
import { colFilters, batchHandle, lineHandle } from '@/utils/common.js'

import { ElMessageBox, ElMessage } from 'element-plus'

import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
const isShowLead = ref(false)

const routerCutLevel = computed(() => {
    return store.getters['setting/routerCutLevel']
})

const data = reactive({
    formModel: {
        sensitiveWord: '',
        activityName: '',
        activityTime: [],
        publishPerson: '',
        valid: '',
    },
    formLabel: [
        {
            label: '敏感词',
            model: "sensitiveWord",
            type: "text",
            width: '160',
            placeholder: '请输入敏感词',
        }
    ],
    btnList: [
        {
            name: '新增敏感词',
            bgColor: '#25D390',
        },
        // {
        //     name: '批量导入',
        //     bgColor: '#00A2FF',
        // },
        // {
        //     name: '批量导出',
        //     bgColor: '#00A2FF',
        // },
        // {
        //     name: '全量导出',
        //     bgColor: '#00A2FF',
        // },
        {
            name: '批量删除',
            bgColor: '#F74B33',
        },
    ],
    tableHeader: [
        {
            label: '敏感词',
            prop: 'sensitiveWord',
        },
        {
            label: '保存时间',
            prop: "insertDate",
        },
    ],
    tableData: [],
    btnData: [
        {
            name: '编辑',
            color: '#25D390',
            change: 'edit',
        },
        {
            name: '删除',
            color: '#F74B33',
            change: 'del',
        }
    ],
    currentSelectList: [],
    pagination: {
        currentPage: 1,
        size: 10,
        total: 0,
    },
    dialog: {
        addValue: '',
        id:'',
        show: false,
        type: '新增'
    },
    loading:false
})

//获取所有活动列表
const getSensitiveWordList = () => {
    data.loading = true
    const params = {
        keyword: data.formModel.sensitiveWord,
        ipi: data.pagination.currentPage,
        ips: data.pagination.size,
        // orderField : "readCount",
        // orderType : "desc",
        // valid : true,
    }
    getSensitiveWordListApi(JSON.stringify(params)).then(res => {
        if (res.status === 200) {
            data.tableData = res.data.result
            data.loading = false
            data.pagination.total = res.data.total
        }
    })
}
getSensitiveWordList()
//重置搜索条件
const resizeForm = () => {
    data.formModel.sensitiveWord = ''
    getSensitiveWordList()
}




//列筛选
const colSelect = (headerArr, type, e, currentItem) => {
    if (type === 'filter') {
        const currentData = colFilters(headerArr, e, currentItem, data.tableHeader)
        data.tableHeader = currentData
    } else {
        //全选/全取消
        data.tableHeader = headerArr
    }
}
//刷新
const refreshTable = () => {
    getSensitiveWordList()
}
//表头功能
const userManageBtnList = (index) => {
    switch (index) {
        case 0:
            data.dialog.type = '新增'
            data.dialog.addValue = ''
            data.dialog.show = true
            break
        // case 1:
        //     isShowLead.value = true
        //     console.log('通过文件批量导入')
        //     break
        // case 2:
        //     console.log('导出')
        //     break
        // case 3:
        //     console.log('全导出')
        //     break
        case 1:
            const delArr = data.currentSelectList.map(v => v.id)
            const delFunction = () => {
                const params = { batchType: 'DEL', ids: delArr }
                sensitiveWordBatchApi(JSON.stringify(params)).then(res => {
                    if (res.status === 200) {
                        ElMessage({
                            message: res.message,
                            type: 'success',
                        })
                        getSensitiveWordList()
                    }
                })
            }
            batchHandle(delArr, 'DEL', delFunction)
            break
        default:
            break
    }
}
//勾选
const getSelectChange = (row) => {
    data.currentSelectList = row
}
//分页查看
const getCurrentChange = (cur) => {
    data.pagination.currentPage = cur
    getSensitiveWordList()
}
//每页条数
const getSizeChange = (cur) => {
    data.pagination.size = cur
    getSensitiveWordList()
}

//新增/编辑敏感词
const addSensitiveWord = () => {
    if (data.dialog.type == '新增') {
        addSensitiveWordApi(JSON.stringify({ sensitiveWord: data.dialog.addValue })).then(res => {
        if (res.status === 200) {
            ElMessage({
                message: res.message,
                type: 'success',
            })
            data.dialog.show = false
            data.addValue = ''
            getSensitiveWordList()
        }
        })   
    } else {
        editSensitiveWordApi(JSON.stringify({ sensitiveWord: data.dialog.addValue ,id:data.dialog.id})).then(res => {
        if (res.status === 200) {
            ElMessage({
                message: res.message,
                type: 'success',
            })
            data.dialog.show = false
            data.addValue = ''
            getSensitiveWordList()
        }
        })   
    }

}

//上传文件
const uploadFile = (data) => {
    console.log(data, 'data');

}



//行内功能
const comEvent = (type, row) => {
    if (type == 'edit') {
        data.dialog.show = true
        data.dialog.addValue = row.sensitiveWord
        data.dialog.id = row.id
        data.dialog.type = '编辑'
    } else if (type == 'del') {
        const delFunction = () => {
            let params = {
                batchType: 'DEL',
                ids: [row.id],
            }
            sensitiveWordBatchApi(JSON.stringify(params)).then((res) => {
                if (res.status === 200) {
                    ElMessage({
                        message: res.message,
                        type: 'success',
                    })
                    getSensitiveWordList()
                }
            })
        }
        lineHandle(row, 'del', delFunction)
    }
}
</script>

<style lang="scss" scoped>
</style>